<template>
    <div class="signDialogCon">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="clockForm">

            <el-form-item label="签到名称" prop="signName">
                <el-input v-model.trim="ruleForm.signName" placeholder="请输入签到名称" />
            </el-form-item>

            <el-form-item label="辅导类型" prop="TutorType">
                <el-radio-group v-model="ruleForm.TutorType">
                    <el-radio label="0">上课签到</el-radio>
                    <el-radio label="1">辅导签到</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="发布时间" prop="dateTime">
                <el-radio-group style="margin-right: 10px" v-model="ruleForm.dateTime"  :disabled="signId==''?false:true">
                    <el-radio label="0">立即发布</el-radio>
                    <el-radio label="1">定时发布</el-radio>
                </el-radio-group>

                <el-date-picker v-if="ruleForm.dateTime === '1'" v-model="ruleForm.startTime"
                    value-format="YYYY-MM-DD HH:mm:ss"  :disabled="signId==''?false:true" type="datetime" format="YYYY-MM-DD HH:mm"
                    placeholder="选择签到发布时间" />
            </el-form-item>


            <el-form-item label="签到时长" prop="times">
                <TimeLength v-model="ruleForm.times"  :disabled="signId==''?false:true"></TimeLength>

            </el-form-item>


            <div class='footer'>
                <el-button class='button' round @click='onCancel'>取消</el-button>
                <el-button class='button' type='primary' round @click="onSubmit">保存</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup>
const props=defineProps({
    signId:{
        type:String,
        default:""
    }
})
const emits = defineEmits(['cancel'])
import TimeLength from "@/components/TimeLength.vue";
const ruleForm = ref({
    signName: "",
    TutorType: "0",
    dateTime: "0",
    signTime: "",
    startTime: "",
    times: 1800000 || 30 * 60 * 1000

})

const rules = ref({
    signName: [{
        required: true,
        message: '请输入签到名称',
        trigger: 'blur',
    }],

    TutorType: [{
        required: true,
        message: '辅导类型必须选择',
        trigger: 'change',
    }],
    dateTime: [{
        required: true,
        message: '发布时间必须选择',
        trigger: 'change',
    }],
    signTime: [{
        required: true,
        message: '签到时长必须选择',
        trigger: 'change',
    }],
    times: [
        { required: true, message: '请设置签到时长' },
        {
            validator: (rule, value, callback) => {
                if (value > 1 * 60 * 1000) callback()
                else callback(new Error('签到时长过短'))
            }
        }
    ],

})


// 点击取消
const onCancel = () => {
    emits('cancel')
}
</script>

<style lang="scss" scoped>
@use "@/assets/styles/custom.scss" as *;

.clockForm {
    .footer {
        @include dialog-form-footer();
    }
}
</style>